<!--
 * @Descripttion: 生态弹出框
-->
<template>
  <div class="page-modal"
  v-loading.fullscreen.lock="fullscreenLoading"
  element-loading-background="rgba(0, 0, 0, 0.5)"
  :element-loading-text="loadingText">
    <lark-drawer
      v-if="result"
      class="eco-coord-drawer"
      ref="workCard"
      :title="title"
      direction="right"
      width="25vw"
      height="auto"
    >
      <template slot="title-operation">
        <i class="icon-download" @click="handleDownload"></i>
      </template>
      <div class="eco-coord-main">
        <div class="header">
          <div class="lon-lat" >
            <span>
              <i class="icon-location"></i>
              经度:{{
              baseData.jd
              }}
            </span>
            <span>
              <i class="icon-location"></i>
              纬度:{{
              baseData.wd
              }}
            </span>
          </div>
          <div class="area" v-if="type==='2'">
            <i class="icon-area"></i>
            总面积 : 
            <span v-if="baseData.mj.split('.')[0].length > 5">{{ (baseData.mj/10000).toFixed(2) }}公顷</span>
            <span v-else>{{ baseData.mj}}平方米</span>
          </div>
          <div class="location">
            <i class="icon-city"></i>
            {{ baseData.xzqmc }}
          </div>
        </div>
        <div class="bottom">
          <el-tabs v-model="activeTab" @tab-click="tabClick">
            <el-tab-pane label="气候特征" name="0" v-if="qxtz">
              <div class="tab-con">
                <div class="base-data">
                  <div class="tit">基本数据</div>
                  <div class="row">
                    <div class="icon">
                      <span class="iconfont icon-jiangyuliang"></span>
                    </div>
                    <div class="key">历史年累积降雨(毫米)</div>
                    <div class="value">{{qxtz.ljjy}}</div>
                  </div>
                  <div class="line"></div>
                  <div class="row">
                    <div class="icon">
                      <span class="iconfont icon-wendu1"></span>
                    </div>
                    <div class="key">历史年平均温度(摄氏度)</div>
                    <div class="value">{{qxtz.pjwd}}</div>
                  </div>
                  <div class="line"></div>
                  <div class="row">
                    <div class="icon">
                      <span class="iconfont icon-shidu"></span>
                    </div>
                    <div class="key">历史年平均湿度(摄氏度)</div>
                    <div class="value">{{qxtz.pjsd}}</div>
                  </div>
                  <div class="line"></div>
                  <div class="row">
                    <div class="icon">
                      <span class="iconfont icon-wendu"></span>
                    </div>
                    <div class="key">历史年有效积温(摄氏度)</div>
                    <div class="value">{{qxtz.yxjw}}</div>
                  </div>
                  <div class="line"></div>
                  <div class="row">
                    <div class="icon">
                      <span class="iconfont icon-rizhao"></span>
                    </div>
                    <div class="key">历史天平均日照时数</div>
                    <div class="value">{{qxtz.pjrzss}}</div>
                  </div>
                  <div class="line"></div>
                  <div class="row">
                    <div class="icon">
                      <span class="iconfont icon-icon--"></span>
                    </div>
                    <div class="key">历史年大风天数(天)</div>
                    <div class="value">{{qxtz.dfts}}</div>
                  </div>
                  <div class="line"></div>
                  <div class="row">
                    <div class="icon">
                      <span class="iconfont icon-ganhan"></span>
                    </div>
                    <div class="key">历史年干旱天数(天)</div>
                    <div class="value">{{qxtz.ghts}}</div>
                  </div>
                  <div class="line"></div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="地理特征" name="1" v-if="dltz">
              <div class="tab-con">
                <div class="base-data">
                  <div class="tit">基本数据</div>
                  <div class="row">
                    <div class="icon">
                      <span class="iconfont icon-bianpo"></span>
                    </div>
                    <div class="key">坡度(角度)</div>
                    <div class="value">{{dltz.pd}}</div>
                  </div>
                  <div class="line"></div>
                  <div class="row">
                    <div class="icon">
                      <span class="iconfont icon-jiaodu"></span>
                    </div>
                    <div class="key">坡向(角度)</div>
                    <div class="value">{{dltz.px}}</div>
                  </div>
                  <div class="line"></div>
                  <div class="row">
                    <div class="icon">
                      <span class="iconfont icon-icon-"></span>
                    </div>
                    <div class="key">海拔高度(米)</div>
                    <div class="value">{{dltz.hbgd}}</div>
                  </div>
                  <div class="line"></div>
                  <div class="row">
                    <div class="icon">
                      <span class="iconfont icon-kuangshan-"></span>
                    </div>
                    <div class="key">山体阴影</div>
                    <div class="value">{{dltz.styy}}</div>
                  </div>
                  <div class="line"></div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="土壤特征" name="2" v-if="trtz">
              <div class="tab-con">
                <div class="base-data">
                  <div class="tit">基本数据</div>
                  <div class="row">
                    <div class="icon">
                      <span class="iconfont icon-duocengturangshangqing"></span>
                    </div>
                    <div class="key">土壤类型</div>
                    <div class="value">{{trtz.trlx}}</div>
                  </div>
                  <div class="line"></div>
                  <div class="row">
                    <div class="icon">
                      <span class="iconfont icon-turangwendu"></span>
                    </div>
                    <div class="key">土壤湿度(百分比)</div>
                    <div class="value">{{trtz.trsd}}</div>
                  </div>
                  <div class="line"></div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </lark-drawer>
  </div>
</template>
<script>
import common from "./common"
export default {
  name:'EcoModal',
  props:{
    // 结果集
    result:{
      type:Object,
      default(){
        return null
      }
    },
    // 标题
    title:{
      type:String,
      default:'坐标点生态指数'
    },
    // 类型
    type:{
      type:String,
      default:'1'
    }
  },
  data(){
    return {
      // 当前选项卡
      activeTab: "0",
      // 点位信息
      baseData: null,
      // 地理特征
      dltz: null,
      // 气象特征
      qxtz: null,
      // 土壤特征
      trtz: null,
      // 加载状态
      fullscreenLoading:false,
      // 加载文字
      loadingText: '正在下载中，请耐心等待......'
    }
  },
  mixins:[common],
  watch:{
    result:{
      deep:true,
      handler(newV){
        // 点位信息
        this.baseData = newV.baseData;
        // 地理特征
        this.dltz = newV.dltz;
        // 气象特征
        this.qxtz = newV.qxtz;
        // 土壤特征
        this.trtz = newV.trtz;

        if(this.$refs.workCard) this.$refs.workCard.showState = true
      }
    }
  },
  methods:{
    // 下载
    downloadClick() {},
    // 选项卡切换回调
    tabClick() {},
    // 下载
    handleDownload(){
      this.downloadRequest(this.result, this.baseData.xzqmc)
    }
  }
}
</script>

<style lang="scss" scoped>
.eco-coord-drawer {
  position: absolute;
  top: 100px;
  right: 0;
  z-index: 1;

  .icon-download {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("~@/assets/images/download.svg") no-repeat;
    background-size: cover;
    cursor: pointer;
  }

  .eco-coord-main {
    height: 65vh;
    background-color: rgb(245, 243, 243);
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      border-radius: 0;
      background-color: rgba(35, 31, 125, 0.6);
    }
    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background-image: linear-gradient(90deg, #086b7a, rgb(17,81,30));
    }

    .header {
      position: relative;
      padding: 14px;
      font-size: 16px;
      color: #3e3e3e;
      &.border {
        border-top: 5px solid #fff;
      }

      & > div {
        margin-bottom: 6px;
        // white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        :last-child {
          margin-bottom: 0;
        }

        i {
          display: inline-block;
          width: 18px;
          height: 18px;
          margin-right: 6px;
          vertical-align: bottom;

          &.icon-location {
            background: url("~@/assets/images/location.png") no-repeat;
            background-size: cover;
          }

          &.icon-city {
            background: url("~@/assets/images/city.png") no-repeat;
            background-size: cover;
          }

          &.icon-area {
            background: url("~@/assets/images/area.png") no-repeat;
            background-size: cover;
          }
        }
      }

      .lon-lat {
        display: flex;
        span {
          display: inline-block;
          width: 50%;
        }
      }
    }
    .bottom {
      padding: 14px;
      padding-top: 0;
      border-top: 5px solid #fff;

      ::v-deep.el-tabs__item {
        font-size: 16px;
        color: #000;

        &:hover {
          color: #000;
        }
      }

      .tab-con {
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
        padding: 15px;
        .tit {
          margin-bottom: 16px;
          font-size: 20px;
        }
        .row {
          display: flex;
          flex-direction: row;
          color: #3e3e3e;
          font-size: 16px;
          line-height: 20px;
          .icon {
            flex: 0.08 1 0%;
          }
          .key {
            flex: 0.5 1 0%;
          }
          .value {
            flex: 0.42 1 0%;
          }
        }
        .line {
          margin: 10px 0;
          background-color: #dcdfe6;
          height: 1px;
          width: 100%;
        }
      }
    }
  }
}
</style>